<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表页</title>
    <link rel="stylesheet" href="./css/base.css">
</head>
<body>
    <div class="container">
       <div>
            <div>
                <button class="btn-back">返回</button>
                <button class="btn-next">下一页</button>
            </div>
            <h3>列表页</h3>
            <ul>
                <li><a href="detail.html?areanumber=11-guagnzhou">详情链接1</a></li>
                <li><a href="detail.html?areanumber=22-shenzhen">详情链接2</a></li>
                <li><a href="detail.html?areanumber=33-beijing">详情链接3</a></li>
            </ul>
            <div class="box">
                ID: 
            </div>
       </div>
    </div>

    <script>
        // 1.0 获取页面相关的标签
        var btnBack = document.querySelector(".btn-back")
        var btnNext = document.querySelector(".btn-next")
        var box = document.querySelector(".box")

        // 2.0 获取页面传递的ID
        var _id = location.search;
        if(_id.indexOf("?") >-1 ){
            _id = _id.split("=")[1];
            box.innerHTML = "ID: "+_id;
        }

        // 3.0 返回上一页
        btnBack.onclick = function(){
            // 调用history的API
            history.back();
        }

        // 4.0 进入下一页
        btnNext.onclick = function(){
            // 调用history的API
            history.forward();
        }



    </script>
</body>
</html>